<script setup lang="ts">
defineOptions({
  name: "Container"
});
import { reactive, ref, onMounted } from "vue";
import {
  getContainer,
  getContainerStatus,
  getServer,
  getNetworkList
} from "@/api/server";
import router from "@/router";
import { containerStatus, containerStatusColor } from "@/utils/hide";
onMounted(async () => {
  await getServerList();
  await getList();
});
const containerBox = reactive({
  page: 1,
  count: 10,
  key: "",
  user_id: "",
  server_id: ""
});
const user_servers = ref([]);
const total = ref(10);
//获取容器列表
const getList = async () => {
  let cons = await getContainer(containerBox);
  user_servers.value = cons.data.data;
  user_servers.value = user_servers.value.map(item => {
    getNetworkList(item.container_id).then(res => {
      item.net = res.data;
    });
    return item;
  });
  // 状态判断请求
  if (user_servers.value) {
    const updatedServers = await Promise.all(
      user_servers.value.map(async item => {
        if (Sever_ID.value[item.server_id] != 0) {
          if (item.container_state > 1) {
            try {
              const res = await getContainerStatus({
                container_id: item.container_id
              });
              if (res.data.data.code == 200) {
                item.container_state = res.data.data.data.state ? 2 : 3;
              } else {
                item.container_state = "";
              }
            } catch (err) {
              item.container_state = "";
            }
          }
        } else {
          item.container_state = "";
        }
        return item;
      })
    );
    console.log("更新后的服务器状态", updatedServers);
    user_servers.value = updatedServers;
  }
  total.value = cons.data.count;
};
const handleCurrentPageChange = async newPage => {
  containerBox.page = newPage;
  getList();
};
const handlePageSizeChange = async newSize => {
  containerBox.count = newSize;
  getList();
};
//服务器地区
const Sever_ID = ref();
const getServerList = async () => {
  let res = await getServer(1, 100, "");
  Sever_ID.value = res.data.data.reduce((acc, item) => {
    acc[item.server_id] = item.state;
    return acc;
  }, {});
  res = res.data.data.map(item => {
    return {
      name: item.name,
      id: item.server_id
    };
  });
  options.value = options.value.concat(res);
};
const options = ref([{ name: "全部", id: "" }]);
const tochange = () => {
  console.log("切换了", containerBox.server_id);
  getList();
};
const uniqueConnectTypes = containerConnects => {
  return containerConnects
    ? [...new Set(containerConnects.map(item => item.connect_type))]
    : [];
};
</script>

<template>
  <div class="body">
    <el-select v-model="containerBox.server_id" placeholder="请选择容器地区" style="width: 240px; margin-bottom: 10px"
      @change="tochange">
      <el-option v-for="(item, index) in options" :key="item.index" :label="item.name" :value="item.id" />
    </el-select>
    <div class="table-box">
      <el-table class="table_el" :data="user_servers" style="width: auto">
        <el-table-column label="ID" prop="container_id" show-overflow-tooltip />
        <el-table-column label="购买价格/元" prop="pay" />
        <el-table-column label="购买时间" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.created_at }}
          </template>
        </el-table-column>
        <el-table-column label="到期时间" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.become_time }}
          </template>
        </el-table-column>
        <el-table-column label="网络类型">
          <template #default="scope">
            <el-tag v-for="item in uniqueConnectTypes(scope.row.net)" style="margin: 5px">{{
              item == "nginx"
                ? "域名转发"
                : item == "floating_ip"
                  ? "独立ip"
                  : "端口转发"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="用户ID">
          <template #default="scope">
            <span class="userid" @click="router.push(`/users/info?user_id=${scope.row.user_id}`)">{{ scope.row.user_id
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <el-tag :type="containerStatusColor(scope.row.container_state)">{{
              containerStatus(scope.row.container_state)
              }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="230">
          <template #header>
            <el-input v-model="containerBox.key" size="small" placeholder="关键字筛选" @blur="getList" />
          </template>
          <template #default="scope">
            <el-button size="small"><router-link
                :to="`/servers/containers?container_id=${scope.row.container_id}&type=${uniqueConnectTypes(scope.row.net)}`">
                管理</router-link></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--分页-->
    <div class="table_pagination">
      <el-pagination background layout="prev, pager, next,sizes" :total="total" :current-page="containerBox.page"
        :page-size="containerBox.count" :page-sizes="[10, 20, 50, 100]" @update:current-page="handleCurrentPageChange"
        @update:page-size="handlePageSizeChange" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.table_box {
  display: flex;
  flex-direction: column;
  height: 50%;
}

.table_box .table_el {
  flex: 1;
}

.table_pagination {
  background-color: #fff;
  padding: 8px 30px;
  display: flex;
  justify-content: space-between;
  overflow-x: auto;
}

.userid {
  cursor: pointer;

  &:hover {
    color: dodgerblue;
  }
}
</style>
